<!--  路由详情 -->
<template>
    <el-container >
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="title">新增API</span>
              </div>
              <el-row>
                <el-col>
                     <div class="base-info">
                        <i class=" el-icon-edit-outline"></i>
                        <span>基础信息</span>
                    </div>
                </el-col>
              </el-row>
             
            <br>
            <el-form :model="routingForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="5">
                         <el-form-item label="网关分组" prop="group">
                            <el-select v-model="routingForm.group" clearable placeholder="请选择网关分组" size="small">
                            <el-option label="01测试" value="001"></el-option>
                            <el-option label="cc(cc)" value="002"></el-option>
                            </el-select>
                         </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="访问" prop="visit">
                            <el-radio-group v-model="routingForm.visit">
                            <el-radio label="1">允许</el-radio>
                            <el-radio label="0">禁止</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                 <el-row>
                    <el-col>
                        <el-form-item label="路由类型" prop="type">
                            <el-radio-group v-model="routingForm.type" class="conent">
                                <el-radio label="1">服务编排</el-radio>
                                <el-radio label="2">服务发现</el-radio>
                                <el-radio label="3">反向代理</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">
                         <el-form-item label="后端服务名" prop="serveName">
                            <el-select v-model="routingForm.serveName" clearable placeholder="请选择后端服务名" size="small">
                            <el-option label="service1" value="001"></el-option>
                            <el-option label="test111" value="002"></el-option>
                            </el-select>
                            <br />
                            <span class="message">
                                路由转发目标服务
                            </span>
                         </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18">
                        <el-form-item label="后端API路径" prop="apiUrl">
                            <el-input v-model="routingForm.apiUrl" placeholder="请输入后端服务api" size="small"></el-input>
                            <div class="message">
                                路由转发目标路径，支持精确匹配和引用前端API路径的变量 
                                <el-tooltip effect="dark" placement="top-start">
                                    <div slot="content" class="content">
                                        <h2>
                                            规则说明
                                        </h2>
                                        <br/>
                                        <p>
                                            API路径匹配规则说明：
                                        </p>
                                         <br/>
                                        <p>
                                            ? 匹配一个字符<br/>
                                            * 匹配一级目录内的0个或多个字符<br/>
                                            ** 匹配0级或多级目录<br/>
                                            {fizz:[a-z]+} 匹配正则表达式 [a-z]+，匹配结果赋值给名为fizz的路径变量<br/>
                                        </p>
                                        <br />
                                        <p>
                                            后端API路径可以通过{$1}-{$n}来获取前端API路径中通配符和正则表达式的值，<br/>正则表达式的值也可以通过命名变量来获取；
                                        </p>
                                        <br />
                                        <p>
                                            例子： <br />
                                            前端API路径： /x/{fizz:[a-z]+}/z/** <br />
                                            后端API路径： /x/{fizz}/{$2} 或 /x/{$1}/{$2} <br />
                                            此例中 {fizz} 和{$1} 取的都是前端API路径中正则表达式{fizz:[a-z]+}的值 <br />
                                        </p>
                                        <br />
                                        <p>
                                            当请求接口路径/x/y/z/a/b/c时，会匹配到上面的路由，{fizz} 和{$1}的值为y, {$2}<br />的值为a/b/c
                                        </p>
                                        </div>
                                    <el-button type="text">(规则说明) </el-button>
                                </el-tooltip>
                                ，如：/a/b/c 或 /a/b/{$1}
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-form-item label="前端服务名" prop="frontName">
                        <el-col :span="4">
                            <el-input v-model="routingForm.frontName" placeholder="请输入前端服务名" size="small"></el-input>
                        </el-col>
                        <el-col :span="3">
                            <el-checkbox v-model="frontChecked">与后端服务名一致</el-checkbox>
                        </el-col>
                        <br/>
                        <el-row>
                            <el-col :span="24">
                                    <div class="font-message">服务名为访问URL其中一级路径，建议与后端服务名一致</div>
                            </el-col>
                        </el-row>
                        
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="18">
                        <el-form-item label="前端API路径" prop="apiUrl">
                            <el-input v-model="routingForm.apiUrl" placeholder="请输入后端服务api" size="small"></el-input>
                            <div class="message">
                                调用方访问路径，支持精确匹配、前缀匹配和正则表达式
                                <el-tooltip effect="dark" placement="top-start">
                                    <div slot="content" class="content">
                                        <h2>
                                            规则说明
                                        </h2>
                                        <br/>
                                        <p>
                                            API路径匹配规则说明：
                                        </p>
                                         <br/>
                                        <p>
                                            ? 匹配一个字符<br/>
                                            * 匹配一级目录内的0个或多个字符<br/>
                                            ** 匹配0级或多级目录<br/>
                                            {fizz:[a-z]+} 匹配正则表达式 [a-z]+，匹配结果赋值给名为fizz的路径变量<br/>
                                        </p>
                                        <br />
                                        <p>
                                            后端API路径可以通过{$1}-{$n}来获取前端API路径中通配符和正则表达式的值，<br/>正则表达式的值也可以通过命名变量来获取；
                                        </p>
                                        <br />
                                        <p>
                                            例子： <br />
                                            前端API路径： /x/{fizz:[a-z]+}/z/** <br />
                                            后端API路径： /x/{fizz}/{$2} 或 /x/{$1}/{$2} <br />
                                            此例中 {fizz} 和{$1} 取的都是前端API路径中正则表达式{fizz:[a-z]+}的值 <br />
                                        </p>
                                        <br />
                                        <p>
                                            当请求接口路径/x/y/z/a/b/c时，会匹配到上面的路由，{fizz} 和{$1}的值为y, {$2}<br />的值为a/b/c
                                        </p>
                                        </div>
                                    <el-button type="text">(规则说明) </el-button>
                                </el-tooltip>
                                ，如：/x/y/z 或 /x/y/**
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                   <el-col :span="24">
                     <el-form-item label="调用方(appID)" prop="appId">
                        <el-checkbox v-model="routingForm.appId">启用</el-checkbox>
                        <div class="message">
                            限制调用方访问，请求URL需在请求头中加应用授权 (示例) ，不启用不限制
                        </div>
                     </el-form-item>
                   </el-col>
                </el-row>
                <el-row>
                    <el-col>
                         <el-form-item label="请求方法" prop="method">
                            <el-select v-model="routingForm.method" clearable size="small">
                                <el-option label="AUTO" value="001" selected></el-option>
                                <el-option label="GET" value="002"></el-option>
                                <el-option label="POST" value="003"></el-option>
                            </el-select>
                         </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col  :span="6">
                        <el-form-item label="超时时间" prop="timeout">
                            <el-input-number v-model="routingForm.timeout" :min="1" controls-position="right" size="small" placeholder="例2000"></el-input-number>
                            (毫秒)
                            <div class="message">
                                默认超时时间为20秒
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                    
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="message" style="text-align: left">
                            提示：网关访问地址格式为: http://{fizz网关ip:port}/proxy/{前端服务名}/{前端API路径}
                        </div>
                    </el-col>
                </el-row>
            </el-form>
             <br />
             <el-row>
                <el-col>
                     <div class="base-info">
                        <i class=" el-icon-edit-outline"></i>
                        <span>插件配置</span>
                    </div>
                </el-col>
              </el-row>
              <el-row>
                 <el-col :span="12" style="text-align: left;margin-top: 10px">
                    <el-button type="primary" size="small" plain @click="addPlugin()">添加插件</el-button>
                </el-col>
              </el-row>
               <el-row>
               <el-divider></el-divider>
                    <el-col style="text-align: right">
                        <el-button size="small" @click="handleCancel()">取消</el-button>
                        <el-button size="small" type="primary">保存</el-button>
                    </el-col>
               </el-row>
        </el-card>

        <el-drawer
            title="我是标题"
            :visible.sync="drawer"
            :with-header="false">
            <h2>添加插件</h2>
            <div class="drawer-box">
                <el-checkbox>全选</el-checkbox>
                <el-checkbox-group v-model="checkedPlugins">
                    <el-checkbox v-for="plugin in checkedPlugins" :label="plugin" :key="plugin">
                             <span>{{plugin}}</span>
                            <i class="el-icon-arrow-right"></i>
                    </el-checkbox>
                </el-checkbox-group>
            </div>
        </el-drawer>
    </el-container>

    
</template>

<script>
export default {
  data () {
    return {
        routingForm: {
            group: '',
            visit: '1',
            type: '1',
            serveName: '',
            apiUrl:'',
            frontName: '',
            appId: false,
            method:'001',
            timeout:''
        },
        frontChecked:false,
        // 抽屉
        drawer: false,
        rules:{
            group: [
                { required: true, message: '请选择网关分组', trigger: 'change' }
            ],
            visit: [
                 { required: true, message: '请选择访问方式', trigger: 'change' }
            ],
            type: [
                 { required: true, message: '请选择路由类型', trigger: 'change' }
            ],
            serveName: [
                { required: true, message: '请选择后端服务名', trigger: 'change' }
            ],
            apiUrl: [
                { required: true, message: '请输入后端API路径', trigger: 'blur' }
            ],
            frontName: [
                { required: true, message: '请输入前端服务名', trigger: 'blur' }
            ],
        },
        checkedPlugins:['访问请求体','我的测试','添加其他字段','JWT','redis鉴权','日志插件']
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
      handleCancel() {
          this.$router.push('/getway/routing');
      },
      addPlugin() {
          this.drawer = true;
      }
  }
}

</script>
<style lang='scss' scoped>
.box-card {
    width: 100%;
    margin: 15px 0;
    .title {
        float: left;
        font-weight: 700;
        font-size: 20px;
    }
    .base-info {
        float: left;
        display: inline;
        font-size: 20px;
        font-weight: 700;
        span {
            margin-left: 10px;
        }
    }
}
/deep/.el-checkbox__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
i {
    color: #ccc;
}
/deep/ .el-form-item__content {
    text-align: left;
}
/deep/ .el-form-item__label {
    font-size: 15px;
}
/deep/.el-form-item {
    margin-bottom: 10px
}
/deep/ .el-input-number--small {
    width: 212px;
}
/deep/ .el-checkbox {
    padding: 0 10px;
}
/deep/ .el-checkbox, .el-checkbox__input {
    height: 50px;
    display: block;
    line-height: 50px;
    border-bottom: 1px solid #EBEEF5;    
}
.message {
    color: #999;
    font-size: 12px;
}
.font-message {
    color: #999;
    font-size: 12px;
    margin-left: 12px;
}
.content {
    p {
        font-size: 15px;
    }
}
.clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
 .drawer-box {
    display: flex;
    flex-direction: column;
    h4,div {
        text-align: left;
    }
} 
</style>